<div class="page_box">
    <div class="pagebg_top">
        <div class="pagebg_bottom">
            <include file="Public:page_left"/>
            <div class="page_right_box">
                <div class="pro_max_pic_box">
                    <div id="myImagesSlideBox" class="myImagesSlideBox">
                        <div class="myImages">
                            <img src="__UPLOADS__/thumb_{$images[0]}" class="myImgs" bigimg="__IMAGES__/{$images[0]}" >
                        </div>
                        <div class="pro_max_pic_info">容量：{$result.argv1}&nbsp;&nbsp;&nbsp;&nbsp;{$result.argv2}元</div>

                        <div id="scrollable">
                            <a class="prev" href="#" title="上一张"></a>
                            <div class="items" >
                                <div class="scrollableDiv">
                                    <foreach name="images" item="v">
                                        <a><img width="42" height="42" imgb="__UPLOADS__/thumb_{$v}" src="__UPLOADS__/thumb_{$v}" bigimg="__UPLOADS__/{$v}" ></a>
                                    </foreach>
                                    </div>
                                <br clear="all"/>
                            </div>
                            <a class="next" href="#" title="下一张"></a>
                        </div>
                    </div>
                </div>
                <div class="page_show_info_box">
                    <div class="page_show_name">{$result.title}</div>
                    <div class="page_show_en">{$result.title_en}</div>
                    <div class="page_show_right_title">Benefits 产品介绍</div>
                    <div class="page_show_info_line1_box">
                        <div class="page_show_right_txt">{$result.desc|htmlspecialchars_decode}</div>
                        <div class="page_show_right_more"></div>
                    </div>

                    <div class="page_show_right_title">The Ritual 使用方法</div>
                    <div class="page_show_right_txt">{$result.usage}</div>
                </div>
            </div>
            <div class="c"></div>
        </div>
    </div>
</div>



<script language="javascript" type="text/javascript">
    jQuery.fn.loadthumb = function(options) {
        options = $.extend({
            src : ""
        },options);
        var _self = this;
        _self.hide();
        var img = new Image();
        $(img).load(function(){
            _self.attr("src", options.src);
            _self.fadeIn("slow");
        }).attr("src", options.src);  //.atte("src",options.src)要放在load后面，
        return _self;
    }

    $(function(){
        var i = 5;  //已知显示的<a>元素的个数
        var m = 5;  //用于计算的变量
        var $content = $("#myImagesSlideBox .scrollableDiv");
        var count = $content.find("a").length;//总共的<a>元素的个数
        //下一张
        $(".next").bind("click",function(){
            var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
            if( !$scrollableDiv.is(":animated")){  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                if(m<count){  //判断 i 是否小于总的个数
                    m++;
                    $scrollableDiv.animate({left: "-=50px"}, 600);
                }
            }
            return false;
        });
        //上一张
        $(".prev").bind("click",function(){
            var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
            if( !$scrollableDiv.is(":animated")){
                if(m>i){ //判断 i 是否小于总的个数
                    m--;
                    $scrollableDiv.animate({left: "+=50px"}, 600);
                }
            }
            return false;
        });

        $(".scrollableDiv a").bind("click",function(){
            var src = $(this).find("img").attr("imgb");
            var bigimgSrc = $(this).find("img").attr("bigimg");
            $(this).parents(".myImagesSlideBox").find(".myImgs").loadthumb({src:src}).attr("bigimg",bigimgSrc);
            $(this).addClass("active").siblings().removeClass("active");
            return false;
        });
        $(".scrollableDiv a:nth-child(1)").trigger("click");

        $(".myImages img").bind("click",function(){
            var bigimgSrc =$(this).attr("bigimg");
            popZoom( bigimgSrc , "500" , "500");
            return false;
        });

        //以新窗口的方式打开图片
        var windowWidth  =$(window).width();
        var windowHeight  =$(window).height();
        function popZoom(pictURL, pWidth, pHeight) {
            var sWidth = windowWidth;
            var sHeight = windowHeight;
            var x1 = pWidth;
            var y1 = pHeight;
            var opts = "height=" + y1 + ",width=" + x1 + ",left=" + ((sWidth-x1)/2) +",top="+ ((sHeight-y1)/2)+",scrollbars=0,menubar=0";
            pZoom = window.open("","", opts);
            pZoom.document.open();
            pZoom.document.writeln("<html><body bgcolor=\"skyblue\"" +" onblur='self.close();' style='margin:0;padding:0;'>");
            pZoom.document.writeln("<img src=\"" + pictURL + "\" width=\"" +pWidth + "px\" height=\"" + pHeight + "px\">");
            pZoom.document.writeln("</body></html>");
            pZoom.document.close();
        }

    })
</script>